<template>
  <div>
    <footer class="footer" v-cloak>
      <span class="todo-count">{{total}} item</span>
      <ul class="filters">
        <li>
          <a href="#/all" @click="filter('all')" :class="{selected:visibility==='all'}">all</a>
        </li>
        <li>
          <a
            href="#/active"
            @click="filter('active')"
            :class="{selected:visibility ==='active'}"
          >active</a>
        </li>
        <li>
          <a
            href="#/completed"
            @click="filter('completed')"
            :class="{selected:visibility==='completed'}"
          >completed</a>
        </li>
      </ul>
      <button class="clear-completed" @click="removeChk">Clear completed</button>
    </footer>
  </div>
</template>

<script>
import { mapActions, mapState, mapMutations, mapGetters } from "vuex";
export default {
  methods: {
    ...mapActions("todo", ["filter", "removeChk"])
  },
  computed: {
    ...mapState("todo", ["visibility"]),
    ...mapGetters("todo", ["total"])
  }
};
</script>

<style scoped>
.footer {
  padding: 10px 15px;
  height: 37px;
  text-align: center;
  font-size: 15px;
  border-top: 1px solid #e6e6e6;
}

.filters {
  margin: 0;
  padding: 0px;
  list-style: none;
  position: absolute;
  right: 67px;
  left: 0;
}
</style>